
<template>
	<!-- 渐变式导航栏 -->
	<view>
		<view class="fixed-top" :style="navBarStyle">
			<!-- 状态拦 -->
			<view :style="'height:'+statusBarHeight+'px'"></view>
			<!-- 导航栏 -->
			<view class="w-100 flex align-center justify-between" style="height: 90rpx;">
				<!-- 左边 -->
				<view class="flex align-center">
					<!-- 返回按钮 -->
					<view class="flex align-center justify-center"
						style="height: 90rpx; width: 90rpx;" 
						@click="back"
						hover-class="bg-hover-lighr">
						<text class="iconfont font-md" :style="buttonStyle">&#xe60d;</text>
					</view>
					<!-- 标题 -->
					<text v-if="title" class="font-md ml-3">{{title}}</text>
				</view>
				<!-- 右边 -->
				<view class="flex align-center">
					<view class="flex align-center justify-center"
						style="height: 90rpx; width: 90rpx;"
						hover-class="bg-hover-lighr" @click="$emit('clickRight')">
						<text class="iconfont font-md" :style="buttonStyle">&#xe682;</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			title: {
				type: [Boolean,String],
				default: ''
			},
			scrollTop:{
				type:[Number, String],
				default:0
			}
		},
		data() {
			return {
				// 动态来获取状态栏的高度
				statusBarHeight:0,
				// 导航栏高度
				navBarHeight:0
			}
		},
		mounted() {
			// 动态来获取状态栏的高度
			// #ifdef APP-PLUS-NVUE
			this.statusBarHeight = plus.navigator.getStatusbarHeight()
			// #endif
			this.navBarHeight = this.statusBarHeight + uni.upx2px(90)  // rpx转px
		},
		computed:{
			// 计算变化
			changeNumber(){
				let start = uni.upx2px(500)
				let end = uni.upx2px(620)
				let H = end - start
				let num = 0
				if(this.scrollTop > start){
					num = (this.scrollTop - start) / H
				}
				return num > 1 ? 1 : num
			},
			navBarStyle(){
				return `background-color: rgba(255, 255, 255, ${this.changeNumber});`
			},
			buttonStyle(){
				if(this.changeNumber > 0){
					return `color: rgba(0, 0, 0, ${this.changeNumber});`
				}
				return 'color: #ffffff'
			}
		},
		methods: {
			// 返回
			back(){
				uni.navigateBack()
			}
		}
	}
</script>

<style>
</style>
